<template>
  <el-dialog v-model="show" :title="title" width="800px" append-to-body :close-on-click-modal="false" destroy-on-close>
    <el-form ref="dialogRef" :model="form" :rules="rules" label-width="110px" inline>
      <div class="rankBox">
        <el-row>
          <el-col :span="8">
            <el-form-item label="队伍logo" prop="imgUrl">
              <ImageUpload v-model="form.imgUrl" class="bili43" :limit="1" :is-show-tip="false"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="队伍名称" required prop="name">
              <el-input v-model="form.name" placeholder="请填写"/>
            </el-form-item>
            <div v-if="coachOrLeaderFlag=='1'">
              <el-form-item label="教练">
                <div class="goChooseBox">
                  <el-select
                      v-model="form.coachIdList"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      :max-collapse-tags="3"
                      placeholder="请选择"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in group.coaches"
                        :key="item.id"
                        :label="item.realName"
                        :value="item.id"
                    />
                  </el-select>
                </div>
              </el-form-item>

              <el-form-item label="领队">
                <div class="goChooseBox">
                  <el-select
                      v-model="form.leaderIdList"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      :max-collapse-tags="3"
                      placeholder="请选择"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in group.leaders"
                        :key="item.id"
                        :label="item.realName"
                        :value="item.id"
                    />
                  </el-select>

                </div>
              </el-form-item>
              <el-form-item label="翻译">
                <div class="goChooseBox">
                  <el-select
                      v-model="form.translatorIdList"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      :max-collapse-tags="3"
                      placeholder="请选择"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in group.translators"
                        :key="item.id"
                        :label="item.realName"
                        :value="item.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item label="队医">
                <div class="goChooseBox">
                  <el-select
                      v-model="form.teamDoctorIdList"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      :max-collapse-tags="3"
                      placeholder="请选择"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in group.teamDoctors"
                        :key="item.id"
                        :label="item.realName"
                        :value="item.id"
                    />
                  </el-select>
                </div>
              </el-form-item>

              <el-form-item label="官员">
                <div class="goChooseBox">
                  <el-select
                      v-model="form.officialIdList"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      :max-collapse-tags="3"
                      placeholder="请选择"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in group.officials"
                        :key="item.id"
                        :label="item.realName"
                        :value="item.id"
                    />
                  </el-select>
                </div>
              </el-form-item>

              <el-form-item label="其他">
                <div class="goChooseBox">
                  <el-select
                      v-model="form.otherIdList"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      :max-collapse-tags="3"
                      placeholder="请选择"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in group.others"
                        :key="item.id"
                        :label="item.realName"
                        :value="item.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
              <div class="tip" v-if="coachOrLeaderFlag=='1'">*请至少选择一个教练或领队</div>

            </div>

          </el-col>

        </el-row>
      </div>

    </el-form>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, toRefs, watch } from 'vue'
import { getCurrentInstance, nextTick, onMounted } from '@vue/runtime-core'
import * as match from '@/api/match/pc'
import { certificates } from '@/assets/lib/nation'
import { ElMessage } from 'element-plus'
import { nationList } from '@/assets/js/data'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['submitForm'])
const data = reactive({
  form: {},
  group: {},
  rules: {
    name: [{ required: true, message: '必填', trigger: 'blur' }],
    imgUrl: [{ required: true, message: '必填', trigger: 'blur' }]
    // regionId: [{ required: true, message: '必填', trigger: 'change' }],
  },
  show: false,
  title: '',
  coachOrLeaderFlag: null
})
const { form, group, rules, show, title, coachOrLeaderFlag } = toRefs(data)
onMounted(() => {

})
let cptId
const open = (params) => {
  console.log(params)
  show.value = true
  cptId = params.cptId
  title.value = params.title
  group.value = _.cloneDeep(params.group)
  form.value = _.cloneDeep(params.form)

  coachOrLeaderFlag.value = params.coachOrLeaderFlag
}
defineExpose({ open })
watch(show, (value) => {
  if (!value) {
    form.value = {}
  }
  nextTick(() => {
    proxy.$refs['dialogRef'].clearValidate()
  })
})


function submitForm() {
  form.value.groupId = group.value.id
  form.value.cptId = cptId
  if (!form.value.imgUrl) {
    ElMessage({
      type: 'warning',
      message: '请上传队伍logo'
    })
    return
  }
  if (!form.value.name) {
    ElMessage({
      type: 'warning',
      message: '请填写队伍名称'
    })
    return
  }
  if (coachOrLeaderFlag.value == '1' && form.value.leaderIdList.length < 1 && form.value.coachIdList.length < 1) {
    ElMessage({
      type: 'warning',
      message: '请至少选择一个教练或领队'
    })
    return
  }
  if (coachOrLeaderFlag.value == '1'){
    form.value.leaderIds = form.value.leaderIdList.toString()
    form.value.coachIds = form.value.coachIdList.toString()
    form.value.otherIds = form.value.otherIdList.toString()

    form.value.teamDoctorIds = form.value.teamDoctorIdList.toString()
    form.value.translatorIds = form.value.translatorIdList.toString()
    form.value.officialIds = form.value.officialIdList.toString()
  }

  delete form.value.leaderIdList
  delete form.value.coachIdList
  delete form.value.otherIdList
  delete form.value.teamDoctorIdList
  delete form.value.translatorIdList
  delete form.value.officialIdList

  match.saveMyTeam(form.value).then(res => {
    show.value = false
    emit('submitForm')
  })
}

function cancel() {
  show.value = false
}
</script>

<style lang="scss">
.el-form-item__label{font-size: 15px;}
.bili43{}
</style>
